<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教师/辅导员管理</title>
    <link rel="stylesheet" href="/plug/layui/css/layui.css">
</head>
<body>
<div style="margin: 20px">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" type="button" onclick="edit('添加')">添加</button>
                <button type="button" class="layui-btn" id="upload">
                    <i class="layui-icon">&#xe67c;</i>导入
                </button>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" type="button" onclick="location.href='/template/teacher.xlsx'">下载模板</button>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input" th:value="${name == null ? '' : name}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <select name="sex">
                        <option value="">请选择</option>
                        <option value="0" th:selected="${sex == 0}">女</option>
                        <option value="1" th:selected="${sex == 1}">男</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" type="button" onclick="search()">检索</button>
                <button class="layui-btn" type="reset">重置</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
        <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>办公室</th>
            <th>性别</th>
            <th>类型</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="data : ${page.records}">
            <td th:text="${data.id}"></td>
            <td th:text="${data.name}"></td>
            <td th:text="${data.phone}"></td>
            <td th:text="${data.address}"></td>
            <td th:text="${data.sex == 0 ? '女' : '男'}"></td>
            <td th:text="${data.type == 1 ? '教师' : '辅导员'}"></td>
            <td th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td width="350px">
                <button class="layui-btn layui-btn-warm" type="button" th:onclick="'edit(\'修改\', ' + ${data.id} + ')'">修改</button>
                <button class="layui-btn layui-btn-danger" type="button" th:onclick="'del(' + ${data.id} +  ')'">删除</button>
                <button class="layui-btn" type="button" th:onclick="'course(' + ${data.id} +  ')'" th:if="${data.type == 1}">授课</button>
                <button class="layui-btn" type="button" th:onclick="'manageClass(' + ${data.id} +  ')'">管理班级</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="page"></div>
</div>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/plug/layui/layui.all.js"></script>
<script>
    $("input[type=reset]").click(function () {
        $(".layui-form select").val("");
    });
    layui.use(['form', 'laypage', 'upload'], function() {
        const form = layui.form;
        const page = layui.laypage;
        const upload = layui.upload;
        form.render('select');
        page.render({
            elem: 'page',
            count: [[${page.total}]],
            limit: 10,
            curr: [[${page.current}]],
            jump: function (obj, first) {
            if(first) {
                return;
            }
            location.href = `/teacher/list?pageNo=${obj.curr}&${$("#search-form").serialize()}`;
        }
        });
        var uploadInst = upload.render({
            elem: '#upload'
            ,url: '/teacher/import'
            ,accept: 'file'
            ,exts: 'xls|xlsx'
            ,done: function(res){
                layer.msg(res.msg);
                if(res.code === 200) {
                    setTimeout(function () {
                        location.reload();
                    }, 800)
                }
            }
            ,error: function() {
                layer.msg("发生错误！");
            }
        });
    });
    function search() {
        location.href = '/teacher/list?pageNo=1&' + $(".layui-form").serialize();
    }

    function edit(title, id) {
        layer.open({
            title: title,
            type: 2,
            area: ['800px', '600px'],
            fixed: false, //不固定
            content: "/teacher/edit?id=" + (id === undefined ? '' : id)
        });
    }

    function del(id) {
        layer.confirm('确认要删除吗？', {
            btn: ['确定', '取消'] //按钮
        }, function() {
            $.post("/teacher/del", { id: id }, function (rest) {
                layer.msg(rest.msg);
                if(rest.code === 200) {
                    location.reload();
                }
            });
        });
    }

    function course(id) {
        layer.open({
            title: '选择所授课程',
            type: 2,
            area: ['570px', '600px'],
            fixed: false, //不固定
            content: "/teacher/course?id=" + id
        });
    }

    function manageClass(id) {
        layer.open({
            title: '选择所授课程',
            type: 2,
            area: ['570px', '600px'],
            fixed: false, //不固定
            content: "/teacher/manageClass?id=" + id
        });
    }
</script>
</body>
</html>